
<template>
  <!-- 已取消 -->
  <div class="app-container">
    <h3 class="title">已取消订单</h3>
    <div v-if="setPermissionBtn('/goodsOrder/query/page', searchBtn)" class="inputBox">
      <el-input v-model="search.orderSn" class="input" placeholder="请输入订单号查询" />
      <el-input v-model="search.goodsName" class="input" placeholder="请输入商品名称查询" />
      <el-input v-model="search.userName" class="input" placeholder="请输入购买人查询" />
      <el-input v-model="search.userPhone" class="input" placeholder="请输购买人手机号查询" />
      <el-date-picker
        v-model="search.startTime"
        class="startDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择开始日期"/>
      <el-date-picker
        v-model="search.endTime"
        class="endDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择结束日期"/>
      <el-button type="primary" class="ml10" @click="toSearch">{{ searchBtn.btnName }}</el-button>
      <el-button type="primary" @click="toReset">重置</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中请稍后"
      border
      fit
      highlight-current-row>
      <template slot="empty">
        <div class="noData">暂无数据</div>
      </template>
      <el-table-column label="订单编号" width="130">
        <template slot-scope="scope">
          {{ scope.row.orderSn }}
        </template>
      </el-table-column>
      <el-table-column label="商品名称">
        <template slot-scope="scope">
          {{ scope.row.goodsName }}
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template slot-scope="scope">
          {{ scope.row.categoryName }}
        </template>
      </el-table-column>
      <el-table-column label="数量" width="50">
        <template slot-scope="scope">
          {{ scope.row.goodsQuantity }}
        </template>
      </el-table-column>
      <el-table-column label="单价">
        <template slot-scope="scope">
          {{ Math.ceil((scope.row.goodsAmount / scope.row.goodsQuantity)*100)/100 }} 元
        </template>
      </el-table-column>
      <el-table-column label="实付">
        <template slot-scope="scope">
          {{ (parseInt(scope.row.payAmount*100))/100 }} 元
        </template>
      </el-table-column>
      <el-table-column label="购买人">
        <template slot-scope="scope">
          {{ scope.row.userName }}
        </template>
      </el-table-column>
      <el-table-column label="购买人手机号" width="110">
        <template slot-scope="scope">
          {{ scope.row.userPhone }}
        </template>
      </el-table-column>
      <el-table-column label="下单时间" width="100">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <!-- 已取消 -100
      待付款 0
      已付款(待发货)100
      已发货(待收货)200
      已收货 300
      申请退款 400
      拒绝退款 410
      (买家)待发货(同意退款) 420
      (买家)已发货 430
      (商家)已收货 440
      已退款 450
      已完成 500 -->
      <el-table-column label="订单状态">
        <template slot-scope="scope">
          <span v-if="scope.row.orderStatus === -100">已取消</span>
          <span v-else-if="scope.row.orderStatus === 0">未付款</span>
          <span v-else-if="scope.row.orderStatus === 100">待发货(已付款)</span>
          <span v-else-if="scope.row.orderStatus === 200">已发货(待收货)</span>
          <span v-else-if="scope.row.orderStatus === 300">已签收</span>
          <span v-else-if="scope.row.orderStatus === 350">已收货</span>
          <span v-else-if="scope.row.orderStatus === 400">申请退款</span>
          <span v-else-if="scope.row.orderStatus === 410">拒绝退款</span>
          <span v-else-if="scope.row.orderStatus === 420 || scope.row.orderStatus === 430 || scope.row.orderStatus === 440">退货中</span>
          <!-- <span v-else-if="scope.row.orderStatus === 420">待发货(退货中)</span>
          <span v-else-if="scope.row.orderStatus === 430">已发货(退货中)</span>
          <span v-else-if="scope.row.orderStatus === 440">已收货(退货中)</span> -->
          <span v-else-if="scope.row.orderStatus === 450">已退款</span>
          <span v-else-if="scope.row.orderStatus === 500">已完成</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="400">
        <template slot-scope="scope">
          <!-- <el-button v-show="permissionShow && permissionBoolean('详情')" size="mini" type="warning" @click="see(scope.$index)">查看详情</el-button>
          <el-button v-show="permissionShow && permissionBoolean('提课程款')" v-if="scope.row.orderStatus === 100" size="mini" type="primary" @click="submit(scope.row.oid, scope.row.tid, scope.row.courseSection)">提课程款</el-button>
          <el-button v-show="permissionShow && permissionBoolean('退佣金')" v-else-if="scope.row.orderStatus === 500" size="mini" type="success" @click="refund(scope.row.oid, scope.row.tid, scope.row.orderCommission)">退佣金</el-button>
           -->
          <!-- v-show="permissionShow && permissionBoolean('详情')" -->
          <el-button
            v-if="setPermissionBtn('/goodsOrder/query', scope.row)"
            size="mini"
            value="查看详情"
            type="warning"
            @click="see(scope.$index)">{{ scope.row.btnName }}</el-button>
          <el-button
            v-if="setPermissionBtn('/express/sendExpress', scope.row)"
            v-show="scope.row.orderStatus === 100"
            size="mini"
            value="发货"
            type="primary"
            @click="sendExpress(scope.row, scope.$index)">{{ scope.row.btnName }}</el-button>
          <el-button
            v-if="setPermissionBtn('/express/logisticsList', scope.row)"
            v-show="scope.row.orderStatus === 200 || scope.row.orderStatus == 500"
            size="mini"
            type="primary"
            value="物流信息"
            @click="toLogistics(scope.row.orderSn, scope.$index)">{{ scope.row.btnName }}</el-button>
          <el-button
            v-if="scope.row.orderStatus === 200"
            size="mini"
            value="取消快递"
            type="danger"
            @click="cancelExpress(scope.row, scope.$index)">取消快递</el-button>
          <el-button
            v-if="scope.row.orderStatus === 400"
            size="mini"
            value="申请退款处理"
            type="primary"
            @click="toLogistics(scope.$index)">申请退款处理</el-button>
          <el-button
            v-if="scope.row.orderStatus === 420 || scope.row.orderStatus === 430 || scope.row.orderStatus === 440"
            size="mini"
            value="退款"
            type="danger"
            @click="toLogistics(scope.$index)">退款</el-button>
          <el-button
            v-if="scope.row.orderStatus === 410 || scope.row.orderStatus === 450"
            size="mini"
            value="退单详情"
            type="primary"
            @click="toLogistics(scope.$index)">退单详情</el-button>
          <el-button
            v-if="setPermissionBtn('/goodsOrderRemarks/query/page', scope.row)"
            v-show="scope.row.orderStatus === 0 || scope.row.orderStatus === 100 || scope.row.orderStatus === 200"
            size="mini"
            value="备注"
            type="primary"
            @click="changeRemarks(scope.row.id, scope.$index)">{{ scope.row.btnName }}</el-button>
          <el-button
            v-if="scope.row.orderStatus === -100 || scope.row.orderStatus === 300 || scope.row.orderStatus === 350 || scope.row.orderStatus === 500"
            size="mini"
            value="查看备注"
            type="success"
            @click="checkRemark(scope.row.id, scope.$index)">查看备注</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
    <remark v-if="remarkVisible" :remark-list.sync="remarkList" :remark-visible.sync="remarkVisible" :remark-index.sync="remarkIndex" />
    <remarkPropt
      ref="remarke"
      :remark-propt-list="remarkProptList"
      :remark-propt-visible.sync="remarkProptVisible"
      :remark-propt-index="remarkProptIndex"
      :remark-type="'storeOrder'"
      @remarkText="remarkText" />
    <detail :detialvisible.sync="dialogTableVisible" :dialogdata.sync="list" :myindex.sync="detailIndex" :detail-mode="'storeOrder'" />
    <logistics :logistics-visible.sync="logistics" :logistics-index="logisticsIndex" :logistics-order-sn="orderSn"/>
    <sendGoods
      :send-goods-visible.sync="sendGoodsVisible"
      :send-goods-index="sendGoodsIndex"
      :send-goods-data="sendGoodsData"
      @shipped="shipped"/>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import detail from '@/components/detail'
import Dialog from '@/components/Dialog'
import remark from '@/components/remark'
import remarkPropt from '@/components/remark/remarkPrompt'
import logistics from '@/components/logistics'
import sendGoods from '@/components/sendGoods'

import { Message } from 'element-ui'
import { getLocalUid, setLocalUid, getLocalId, setLocalId } from '@/utils/uid'
import { getPermission } from '@/api/permission'
import { getLocalUserName, setLocalUserName } from '@/utils/uid'
import { storeRemarkList } from '@/api/store'
import { getStoreOrder, getStoreOrderRemarks } from '@/api/storeOrder'
import { cancelExpress } from '@/api/express'

export default {
  components: { Pagination, Dialog, detail, remarkPropt, remark, logistics, sendGoods },
  filters: {
  },
  data() {
    return {
      searchBtn: {},
      // visible: false,
      userName: '',
      userType: -1,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 0,
        pageSize: 10,
        orderStatus: -100 // 已取消
      },
      search: {
        orderSn: '',
        goodsName: '',
        userName: '',
        userPhone: '',
        startTime: '',
        endTime: '',
        orderStatus: -100 // 已取消
      },
      permissionShow: false, // 权限数据未到达之前按钮隐藏
      // permissionList: [] // 权限数据列表

      dialogTableVisible: false, // 详情弹窗
      detailIndex: -1,

      remarkProptVisible: false, // 备注弹窗
      remarkProptList: [],
      remarkProptIndex: -1,

      remarkVisible: false, // 查看备注弹窗
      remarkIndex: -1,
      remarkList: [],

      logistics: false, // 物流弹窗
      logisticsIndex: -1,
      orderSn: '',

      sendGoodsVisible: false, // 发货弹窗
      sendGoodsIndex: -1,
      sendGoodsData: {}
    }
  },
  computed: {
    // 权限按钮 computed
    setPermissionBtn() {
      return function(str, row) {
        let index = -1
        const buttonList = this.$store.getters.button
        index = buttonList.findIndex(item => item.value === str)
        // console.log(index)
        if (index !== -1) {
          row.btnName = buttonList[index].name
          return true
        } else {
          return false
        }
      }
    }
  },
  watch: {
    'permissionList'(newVal) {
      this.permissionList = newVal
      this.permissionShow = true
    }
  },
  created() {
    this.getUserType()
    this.fetchData()
    // console.log('userType:', this.userType)
    // this.getPermissonFn()
  },
  mounted() {
    this.getPermissonFn() // 获取按钮权限 vuex的button
  },
  methods: {
    // 取消发货
    cancelExpress(data, index) {
      console.log(data.orderSn)
      const cancelFormData = new FormData();
      cancelFormData.append('orderSn', data.orderSn)
      this.$confirm('您确定取消快递？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        cancelExpress(cancelFormData).then(res => {
          Message.success('快递已取消')
          this.fetchData()
          this.listLoading = false
        })
      })
    },
    // 发货
    sendExpress(data, index) {
      this.sendGoodsVisible = true
      this.sendGoodsIndex = index
      this.sendGoodsData = data
    },
    shipped(data) {
      Message.success(data)
      this.fetchData()
    },

    // 订单详情
    see(index) {
      this.dialogTableVisible = true
      this.detailIndex = index
    },
    toLogistics(orderSn, index) {
      console.log('orderSn:', typeof orderSn)
      this.logistics = true
      this.orderSn = orderSn
      this.logisticsIndex = index
    },
    // 备注  <remark :remark-list="remarkList" :remark-visible.sync="remarkVisible" :remark-index="remarkIndex" />
    // 查看备注
    checkRemark(id, index) {
      const obj = { goodsOrderId: id }
      getStoreOrderRemarks(obj).then(res => {
        if (res.code === '200') {
          this.remarkList = res.data.list
          console.log(this.remarkList)
          console.log(this.remarkList)
          if (this.remarkList.length > 0) {
            this.remarkVisible = true
            this.remarkIndex = index
          } else {
            this.$message('暂无备注');
          }
        } else {
          Message.error(res.message + '-' + res.data)
        }
      })
    },
    changeRemarks(goodsId, index) {
      this.remarkProptIndex = index
      this.remarkProptVisible = true
      this.$refs.remarke.getGoodsRemark(goodsId)
    },
    remarkText() {
      this.fetchData()
    },
    getUserType() {
      switch (getLocalUserName()) {
        case 'admin':
          this.userType = 1
          break;
        case 'sale':
          this.userType = 2
          break;
        case 'casher':
          this.userType = 3
          break;
      }
    },
    // 查询
    toSearch() {
      if (this.search.startTime && this.search.endTime) {
        const start = new Date(this.search.startTime).getTime();
        const end = new Date(this.search.endTime).getTime();
        if (start > end) {
          Message.error('结束时间必须大于开始时间')
          return false
        }
      }
      if (this.search.startTime && this.search.startTime.indexOf(' 00:00:00') === -1) this.search.startTime += ' 00:00:00'
      if (this.search.endTime && this.search.endTime.indexOf(' 23:59:59') === -1) this.search.endTime += ' 23:59:59'
      this.listLoading = true
      console.log(this.search)
      const newData = this.objectCon(this.listQuery, this.search)
      getStoreOrder(newData).then(response => {
        if (response.code === '200') {
          this.list = response.data.list
          this.total = response.data.total
        } else {
          Message.error(response.message + '-' + response.data)
        }
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    // 重置
    toReset() {
      this.search.orderSn = ''
      this.search.goodsName = ''
      this.search.userName = ''
      this.search.userPhone = ''
      this.search.startTime = ''
      this.search.endTime = ''
    },
    /*
      已取消 -100
      待付款 0
      已付款(待发货)100
      已发货(待收货)200
      已收货 300
      申请退款 400
      拒绝退款 410
      (买家)待发货(同意退款) 420
      (买家)已发货 430
      (商家)已收货 440
      已退款 450
      已完成 500
      */
    fetchData() {
      this.listLoading = true
      getStoreOrder(this.listQuery).then(response => {
        if (response.code === '200') {
          this.list = response.data.list
          // this.list[0].orderStatus = -100
          // this.list[1].orderStatus = 0
          // this.list[2].orderStatus = 100
          // this.list[3].orderStatus = 200
          // this.list[4].orderStatus = 300
          // this.list[5].orderStatus = 400
          // this.list[6].orderStatus = 410
          // this.list[7].orderStatus = 420
          // this.list[8].orderStatus = 430
          // this.list[9].orderStatus = 440
          // this.list[8].orderStatus = 450
          // this.list[9].orderStatus = 500
          console.log('订单数据：', this.list)
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 0.5 * 1000)
        } else {
          this.listLoading = false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .inputBox{
    div{ margin-bottom: 10px;}
    .input:nth-of-type(1){ width: 200px }
    .input:nth-of-type(2){ width: 160px }
    .input:nth-of-type(3){ width: 160px }
    .input:nth-of-type(4){ width: 180px }
    .startDate, .endDate{ width: 180px }
    .input:nth-of-type(7){width:140px}
  }
</style>
